<!--
 * @Date: 2024-01-02 11:42:56
 * @Auth: 873768511@qq.com
 * @LastEditors: tanjiujiu 873768511@qq.com
 * @LastEditTime: 2024-03-26 13:33:50
 * @FilePath: \dram-web\src\views\index.vue
-->
<template>
  <div>
    <div class="header">
      <el-radio-group v-model="projectType" @change="handleChange" class="header-btn">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button v-for="item in project_type" :label="item.value">{{ item.label }}</el-radio-button>
      </el-radio-group>
    </div>
    <el-row :gutter="10">
      <el-col v-for="item in cardList" :span="4">
        <div class="card-item">
          <svg-icon :icon-class="item.icon"></svg-icon>
          <div class="card-right">
            <div>
              <span class="item-value">{{ item.value }}</span>
              <span class="item-unit">{{ item.unit }}</span>
            </div>
            <div class="item-name">{{ item.name }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="card-btn">
          <el-button type="primary" icon="Plus" @click="dialogVisible = true">新增项目</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="新增项目" v-model="dialogVisible" width="40%" @close="cancle('dialogForm')">
      <el-form :rules="rules" ref="dialogForm" :model="form" style="padding:20px;">
        <el-form-item prop="type" label="取得方式：">
          <el-radio-group v-model="form.type">
            <el-radio v-for="item in project_type" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('dialogForm')">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name="Index">
const router = useRouter();
const tableRef = ref()
const { proxy } = getCurrentInstance()
const { project_status, project_type, project_results, item_type } = proxy.useDict(
  "project_status",
  "project_type",
  "project_results",
  "item_type"
);
const cardList = ref([
  { name: '已立项', key: 'ylx', value: '2', unit: '条', icon: 'file' },
  { name: '已研究', key: 'yyj', value: '0', unit: '条', icon: 'file' },
  { name: '已开发', key: 'ykf', value: '4', unit: '条', icon: 'file' },
  { name: '已结项', key: 'yjx', value: '12', unit: '条', icon: 'file' },
  { name: '资产化', key: 'zcg', value: '33', unit: '条', icon: 'file' },
])
const projectType = ref('')
const data = reactive({
  form: {
    type: '',
  },
  rules: {
    type: [{ required: true, message: "请选择取得方式", trigger: "change" }],
  }
});
const dialogVisible = ref(false)
const { form, rules } = toRefs(data);
// 新增
function submitForm (formName) {
  proxy.$refs[formName].validate(valid => {
    if (valid) {
      router.push({
        path: '/PM/add',
        query: {
          type: form.value.type,
          flag: 'add'
        }
      })
    }
  })
}
function cancle (formName) {
  form.value.type = ''
  proxy.$refs[formName].resetFields()
}
function handleChange () {

}
function addProject () {

}
</script>

<style lang="scss" scoped>
.header-btn {
  margin-bottom: 20px;
}

.card-item {
  height: 90px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;

  &:hover {
    box-shadow: 0 0 6px 2px #e3ecff;
  }

  .card-right {
    text-align: left;
    width: calc(100% - 40px);
  }

  .svg-icon {
    font-size: 40px;
    margin-right: 10px;
  }

  .item-value {
    font-size: 30px;
    color: #333; //#3970e3;
    margin-right: 10px;
    font-weight: bold;
  }

  .item-unit {
    font-size: 12px;
  }

  .item-name {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 4px;
  }
}

.card-btn {
  height: 86px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
</style>
